Sencha Touch এর পরিচিতি
Sencha Touch একটি HTML5 ভিত্তিক ফ্রেমওয়ার্ক যা মোবাইল ও ট্যাবলেট ডিভাইসের জন্য শক্তিশালী, রেসপনসিভ ও ইউজার ফ্রেন্ডলি ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি জাভাস্ক্রিপ্ট, CSS3, এবং HTML5 এর সাহায্যে অত্যন্ত দ্রুত মোবাইল অ্যাপ্লিকেশন তৈরি করার সুযোগ দেয়। Sencha Touch একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক, যার মাধ্যমে আপনি একটি অ্যাপ্লিকেশন তৈরি করতে পারেন যা একাধিক মোবাইল অপারেটিং সিস্টেমে (যেমন iOS, Android) চলতে পারে।
Sencha Touch-এর সাথে মোবাইল অ্যাপ্লিকেশন তৈরি করা হয় একধরনের MVC (Model-View-Controller) আর্কিটেকচার ব্যবহার করে, যেখানে ডেটা মডেল, ইউজার ইন্টারফেস (View), এবং লজিকাল কন্ট্রোলার আলাদা আলাদা থাকে। এই ফ্রেমওয়ার্কটি প্রোফেশনাল ও স্মার্ট মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য অনেক ধরনের বিল্ট-ইন টুলস এবং লাইব্রেরি প্রদান করে।
প্রথম Sencha Touch অ্যাপ্লিকেশন তৈরি করা
এখানে একটি সাধারণ Sencha Touch অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়া বর্ণনা করা হলো:
প্রাথমিক প্রস্তুতি:
- Sencha Touch ইনস্টল করা:
- প্রথমে, Sencha Cmd টুল ইনস্টল করতে হবে, যা Sencha Touch অ্যাপ্লিকেশন তৈরি এবং ম্যানেজ করতে সাহায্য করবে।
Sencha Cmd ইনস্টলেশন:
npm install -g sencha
- নতুন অ্যাপ্লিকেশন তৈরি করা:
নতুন অ্যাপ্লিকেশন তৈরি করতে, আপনি Sencha Cmd ব্যবহার করতে পারেন। একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে নিচের কমান্ড ব্যবহার করুন:
sencha generate app MyFirstApp ./MyFirstApp- এখানে,
MyFirstAppহলো অ্যাপ্লিকেশন নাম এবং এটি একটি নতুন ডিরেক্টরি তৈরি করবে যেখানে অ্যাপ্লিকেশন ফাইল থাকবে।
অ্যাপ্লিকেশন ফোল্ডার স্ট্রাকচার:
এখন, আপনি MyFirstApp ডিরেক্টরিতে যাবেন। ফোল্ডার স্ট্রাকচারটি কিছুটা এরকম হবে:
MyFirstApp/
│
├── app/
│ ├── controller/
│ ├── model/
│ ├── view/
│ └── Main.js
├── resources/
│ ├── css/
│ ├── images/
│ └── js/
└── index.html
এখানে:
- app/: অ্যাপ্লিকেশনের কোড, কন্ট্রোলার, মডেল এবং ভিউ ফাইল থাকবে।
- resources/: CSS, JavaScript, ইমেজ এবং অন্যান্য রিসোর্স থাকবে।
- index.html: অ্যাপ্লিকেশন এর মূল HTML ফাইল।
অ্যাপ্লিকেশন কনফিগারেশন:
অ্যাপ্লিকেশন কনফিগার করার জন্য, app.js বা Main.js ফাইলের মধ্যে অ্যাপ্লিকেশন কনফিগারেশন এবং অন্যান্য সেটিংস দেওয়া থাকে। এখানে আমরা একটি সাধারণ Main.js ফাইলের কনফিগারেশন উদাহরণ দেব:
Ext.application({
name: 'MyFirstApp',
launch: function() {
Ext.Viewport.add({
xtype: 'panel',
html: 'Hello, Sencha Touch!'
});
}
});
এখানে:
- Ext.application: অ্যাপ্লিকেশন শুরু করার জন্য ব্যবহার করা হয়।
- launch: অ্যাপ্লিকেশন লোড হওয়ার পর এই ফাংশনটি কল হবে।
- Ext.Viewport.add: এই কমান্ড দিয়ে অ্যাপ্লিকেশনটির UI উপাদান যোগ করা হয়। এখানে একটি সাধারণ
panelযোগ করা হয়েছে যার মধ্যে একটিhtmlকন্টেন্ট রয়েছে।
স্টাইল এবং ইউআই কাস্টমাইজেশন:
Sencha Touch-এর জন্য বিভিন্ন প্রি-ডিফাইন্ড থিম এবং স্টাইল রয়েছে, কিন্তু আপনি নিজে কাস্টম স্টাইলও অ্যাপ্লিকেশনে যোগ করতে পারেন। উদাহরণস্বরূপ, resources/css ফোল্ডারে CSS ফাইল তৈরি করে, অ্যাপ্লিকেশনের UI কাস্টমাইজ করা যাবে।
অ্যাপ্লিকেশন রানে পরীক্ষা করা:
অ্যাপ্লিকেশনটি রানে পরীক্ষার জন্য নিচের কমান্ডটি ব্যবহার করুন:
sencha web start
এটি একটি লোকাল সার্ভার শুরু করবে এবং আপনি localhost এ গিয়ে অ্যাপ্লিকেশন দেখতে পারবেন।
ফাইনাল আউটপুট:
এখন আপনি ব্রাউজারে গিয়ে localhost:1841 এ গিয়ে Sencha Touch অ্যাপ্লিকেশন দেখতে পারবেন, যা "Hello, Sencha Touch!" মেসেজটি শো করবে।
সারাংশ
Sencha Touch একটি শক্তিশালী HTML5 ফ্রেমওয়ার্ক যা মোবাইল ডিভাইসের জন্য সমৃদ্ধ এবং রেসপন্সিভ অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Sencha Touch ব্যবহার করে প্রথম অ্যাপ্লিকেশন তৈরি করতে, আপনি Sencha Cmd টুল ইনস্টল করবেন, একটি নতুন অ্যাপ্লিকেশন জেনারেট করবেন, এবং অ্যাপ্লিকেশনের মধ্যে প্রয়োজনীয় কনফিগারেশন ও ইউআই উপাদান যুক্ত করবেন। এর মাধ্যমে আপনি দ্রুত মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্ট প্রক্রিয়া শুরু করতে পারেন এবং শক্তিশালী মোবাইল ফিচার সহ অ্যাপ্লিকেশন তৈরি করতে পারেন।
Read more
